<template>
	<view class="order-box">
		<!-- #ifdef MP-WEIXIN -->
		<button class="order-box-item message" open-type="contact" :class="{ hidden: buying }">
			<fa-icon class="icon" color="#000" type="comment-o" size="20"></fa-icon>
			<text class="message-text">咨询</text>
		</button>
		<!-- #endif -->
		<view class="order-box-item buy-single" :class="{ hidden: buying }" v-if="showButton1&&!isIOS" @tap="tapButton1">{{ buttonText1 }}</view>
		<view class="order-box-item buy-vip" :class="{ hidden: buying }" v-if="showButton2&&!isIOS" @tap="tapButton2">{{ buttonText2 }}</view>
		<view class="order-box-item pay" :class="{ hidden: !buying }" @tap="pay">{{ payText }}</view>
	</view>
</template>

<script>
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
export default {
	name: 'yxylOrderBox',
	components: { faIcon },
	props: {
		buying: {
			type: Boolean,
			default: false
		},
		buttonText1: {
			type: String,
			default() {
				return '赠送亲友';
			}
		},
		buttonText2: {
			type: String,
			default() {
				return '立即加入会员';
			}
		},
		showButton1: {
			type: Boolean,
			default: true
		},
		showButton2: {
			type: Boolean,
			default: true
		},
		payText: {
			type: String,
			default() {
				return '立即支付';
			}
		}
	},
	computed: {
		isIOS: () => {
			var isIOS = false;
			// #ifdef MP-WEIXIN
			isIOS = uni.getSystemInfoSync().platform == 'ios';
			// #endif
			return isIOS;
		}
	},
	methods: {
		tapButton1() {
			this.$emit('tapButton1');
		},
		tapButton2() {
			this.$emit('tapButton2');
		},
		pay() {
			this.$emit('pay');
		}
	}
};
</script>

<style lang="scss" scoped>
.order-box {
	width: 100%;
	height: 100%;
	display: flex;
}
.order-box-item {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: #f8f8f8;
	font-size: 15px;
	&:after {
		border: none;
		border-radius: 0;
	}
}
.message {
	flex-basis: 25%;
	flex-grow: 1;
	border-right: 1px solid #c0c0c0;

	.message-text {
		margin-left: 10rpx;
	}
}
.buy-single,
.send {
	flex-basis: 25%;
	flex-grow: 1;
}
.buy-vip,
.pay {
	flex-basis: 50%;
	flex-grow: 1;
	border-left: 1px solid #c0c0c0;
	background: $uni-color-main-dark;
	color: #fff;
}
</style>
